<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太空主题登录页面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --text-color: #2b2d42;
            --bg-color: #f8f9fa;
            --card-color: #ffffff;
            --input-bg: #f1f3f5;
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
            --social-divider-color: #dee2e6;
            --control-btn-bg: rgba(0, 0, 0, 0.1);
            --control-btn-color: #2b2d42;
            --dropdown-gap: 10px;
            --active-language-bg: rgba(67, 97, 238, 0.1);
        }

        .dark-mode {
            --primary-color: #4895ef;
            --secondary-color: #4361ee;
            --text-color: #f8f9fa;
            --bg-color: #121212;
            --card-color: #1e1e1e;
            --input-bg: #2d2d2d;
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            --social-divider-color: #495057;
            --control-btn-bg: rgba(255, 255, 255, 0.2);
            --control-btn-color: white;
            --active-language-bg: rgba(72, 149, 239, 0.2);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            transition: var(--transition);
            min-height: 100vh;
            display: flex;
            overflow-x: hidden;
        }

        .container {
            display: flex;
            width: 100%;
            min-height: 100vh;
            flex-direction: row-reverse;
        }

        .login-section {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            position: relative;
        }

        .login-card {
            background-color: var(--card-color);
            padding: 3rem;
            border-radius: 20px;
            box-shadow: var(--shadow);
            width: 100%;
            max-width: 450px;
            transition: var(--transition);
            z-index: 2;
            position: relative;
        }

        .register-card {
            display: none;
        }

        .forgot-password-card {
            display: none;
        }

        .card-title {
            text-align: center;
            margin-bottom: 2rem;
        }

        .card-title h1 {
            font-size: 2rem;
            margin-bottom: 0.5rem;
            font-weight: 700;
        }

        .card-title p {
            color: #6c757d;
            font-size: 0.9rem;
        }

        .dark-mode .card-title p {
            color: #adb5bd;
        }

        .form-group {
            margin-bottom: 1.5rem;
            position: relative;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            font-size: 0.9rem;
        }

        .form-control {
            width: 100%;
            padding: 0.8rem 1rem;
            border: none;
            border-radius: 10px;
            background-color: var(--input-bg);
            color: var(--text-color);
            font-size: 1rem;
            transition: var(--transition);
        }

        .form-control:focus {
            outline: none;
            box-shadow: 0 0 0 2px var(--primary-color);
        }

        .options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            font-size: 0.9rem;
        }

        .checkbox-group {
            display: flex;
            align-items: center;
        }

        .checkbox-group input {
            margin-right: 0.5rem;
        }

        .link-btn {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            font-size: inherit;
        }

        .link-btn:hover {
            text-decoration: underline;
        }

        .btn {
            width: 100%;
            padding: 0.8rem;
            border: none;
            border-radius: 10px;
            background-color: var(--primary-color);
            color: white;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            margin-bottom: 1.5rem;
        }

        .btn:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
        }

        .btn-secondary {
            background-color: var(--input-bg);
            color: var(--text-color);
        }

        .btn-secondary:hover {
            background-color: var(--input-bg);
            opacity: 0.9;
        }

        .social-login {
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .social-login p {
            position: relative;
            margin-bottom: 1rem;
            font-size: 0.9rem;
            color: #6c757d;
        }

        .dark-mode .social-login p {
            color: #adb5bd;
        }

        .social-login p::before,
        .social-login p::after {
            content: "";
            position: absolute;
            top: 50%;
            width: 30%;
            height: 1px;
            background-color: var(--social-divider-color);
            transition: var(--transition);
        }

        .social-login p::before {
            left: 0;
        }

        .social-login p::after {
            right: 0;
        }

        .social-icons {
            display: flex;
            justify-content: center;
            gap: 1rem;
        }

        .social-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--input-bg);
            color: var(--text-color);
            cursor: pointer;
            transition: var(--transition);
        }

        .social-icon:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .dark-mode .social-icon:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .switch-link {
            text-align: center;
            font-size: 0.9rem;
        }

        .illustration-section {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            position: relative;
            overflow: hidden;
        }

        .dark-mode .illustration-section {
            background: linear-gradient(135deg, #000000, #0a0a2a, #000033);
        }

        .stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .star {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            animation: twinkle 5s infinite alternate;
        }

        @keyframes twinkle {
            0% { opacity: 0.3; }
            100% { opacity: 1; }
        }

        .planet {
            position: absolute;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle at 30% 30%, #3a1c71, #d76d77, #ffaf7b);
            border-radius: 50%;
            top: 50px;
            right: 50px;
            box-shadow: 0 0 50px rgba(255, 175, 123, 0.5);
            animation: float 15s infinite ease-in-out;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
        }

        .astronaut {
            position: relative;
            width: 300px;
            height: 400px;
            z-index: 1;
        }

        .astronaut-part {
            position: absolute;
            transition: transform 0.5s ease-out;
        }

        .helmet {
            width: 120px;
            height: 120px;
            background-color: white;
            border-radius: 50%;
            top: 80px;
            left: 90px;
            z-index: 3;
            box-shadow: inset -10px -10px 30px rgba(0,0,0,0.2);
        }

        .visor {
            width: 60px;
            height: 30px;
            background: linear-gradient(135deg, #6dd5ed, #2193b0);
            border-radius: 15px;
            top: 110px;
            left: 110px;
            z-index: 4;
        }

        .suit {
            width: 150px;
            height: 180px;
            background-color: white;
            border-radius: 30px 30px 10px 10px;
            top: 190px;
            left: 75px;
            z-index: 2;
        }

        .arm-left, .arm-right {
            width: 40px;
            height: 120px;
            background-color: white;
            border-radius: 20px;
            top: 200px;
            transform-origin: top center;
            z-index: 1;
        }

        .arm-left {
            left: 35px;
        }

        .arm-right {
            left: 225px;
        }

        .leg-left, .leg-right {
            width: 50px;
            height: 140px;
            background-color: white;
            border-radius: 10px 10px 20px 20px;
            top: 360px;
            transform-origin: top center;
            z-index: 1;
        }

        .leg-left {
            left: 90px;
        }

        .leg-right {
            left: 160px;
        }

        .backpack {
            width: 60px;
            height: 80px;
            background-color: #3a0ca3;
            border-radius: 15px;
            top: 200px;
            left: 195px;
            z-index: 1;
        }

        .controls {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            gap: 10px;
            z-index: 10;
        }

        .control-btn {
            background-color: var(--control-btn-bg);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--control-btn-color);
            cursor: pointer;
            transition: var(--transition);
        }

        .control-btn:hover {
            background-color: var(--primary-color);
            color: white;
            transform: scale(1.1);
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            position: absolute;
            right: 0;
            background-color: var(--card-color);
            min-width: 160px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            z-index: 1;
            overflow: hidden;
            transform-origin: top right;
            transform: scale(0);
            opacity: 0;
            transition: all 0.2s ease-out;
            margin-top: var(--dropdown-gap); /* 添加与图标的间距 */
        }

        .dropdown.active .dropdown-content {
            transform: scale(1);
            opacity: 1;
        }

        .dropdown-content a.active {
            background-color: var(--primary-color);
            color: white;
            pointer-events: none; /* 禁止点击 */
            cursor: default;
        }

        .dropdown-content a.active:hover {
            background-color: var(--primary-color);
        }

        .dark-mode .dropdown-content {
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        }

        .dropdown-content a {
            color: var(--text-color);
            padding: 10px 15px;
            text-decoration: none;
            display: flex;
            align-items: center;
            font-size: 0.9rem;
            transition: var(--transition);
        }

        .dropdown-content a:hover {
            background-color: var(--input-bg);
        }

        .dropdown-content a.active {
            background-color: var(--active-language-bg);
            color: var(--primary-color);
            cursor: default;
            pointer-events: none; /* 禁用点击事件 */
        }

        .dropdown-content a.active .flag-icon {
            box-shadow: 0 0 0 2px var(--primary-color);
        }

        .flag-icon {
            width: 20px;
            height: 15px;
            margin-right: 10px;
            border-radius: 2px;
        }

        @media (max-width: 992px) {
            .illustration-section {
                display: none;
            }

            .controls {
                right: 50%;
                transform: translateX(50%);
                top: 10px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="login-section">
        <div class="controls">
            <div class="control-btn" id="theme-toggle">
                <i class="fas fa-moon"></i>
            </div>
            <div class="dropdown" id="language-dropdown">
                <div class="control-btn" id="language-toggle">
                    <img src="https://flagcdn.com/w20/cn.png" style="width:20px;height:15px;border-radius:2px;">
                </div>
                <div class="dropdown-content">
                    <a href="#" data-lang="zh" class="active">
                        <img src="https://flagcdn.com/w20/cn.png" class="flag-icon" alt="中文"> 中文
                    </a>
                    <a href="#" data-lang="en">
                        <img src="https://flagcdn.com/w20/us.png" class="flag-icon" alt="English"> English
                    </a>
                    <a href="#" data-lang="es">
                        <img src="https://flagcdn.com/w20/es.png" class="flag-icon" alt="Español"> Español
                    </a>
                    <a href="#" data-lang="ja">
                        <img src="https://flagcdn.com/w20/jp.png" class="flag-icon" alt="日本語"> 日本語
                    </a>
                </div>
            </div>
        </div>

        <!-- 登录卡片 -->
        <div class="login-card" id="login-card">
            <div class="card-title">
                <h1>欢迎回来</h1>
                <p>请输入您的凭据以登录您的帐户</p>
            </div>
            <form id="login-form">
                <div class="form-group">
                    <label for="email">电子邮箱</label>
                    <input type="email" id="email" class="form-control" placeholder="请输入您的邮箱地址" required>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" class="form-control" placeholder="请输入您的密码" required>
                </div>
                <div class="options">
                    <div class="checkbox-group">
                        <input type="checkbox" id="remember">
                        <label for="remember">记住我</label>
                    </div>
                    <button type="button" class="link-btn" id="forgot-password-btn">忘记密码?</button>
                </div>
                <button type="submit" class="btn">登录</button>
                <div class="social-login">
                    <p>或使用以下方式登录</p>
                    <div class="social-icons">
                        <div class="social-icon">
                            <i class="fab fa-google"></i>
                        </div>
                        <div class="social-icon">
                            <i class="fab fa-facebook-f"></i>
                        </div>
                        <div class="social-icon">
                            <i class="fab fa-twitter"></i>
                        </div>
                        <div class="social-icon">
                            <i class="fab fa-github"></i>
                        </div>
                    </div>
                </div>
                <div class="switch-link">
                    还没有账号? <button type="button" class="link-btn" id="register-btn">立即注册</button>
                </div>
            </form>
        </div>

        <!-- 注册卡片 -->
        <div class="login-card register-card" id="register-card">
            <div class="card-title">
                <h1>创建账号</h1>
                <p>填写以下信息创建新帐户</p>
            </div>
            <form id="register-form">
                <div class="form-group">
                    <label for="reg-name">用户名</label>
                    <input type="text" id="reg-name" class="form-control" placeholder="请输入用户名" required>
                </div>
                <div class="form-group">
                    <label for="reg-email">电子邮箱</label>
                    <input type="email" id="reg-email" class="form-control" placeholder="请输入您的邮箱地址" required>
                </div>
                <div class="form-group">
                    <label for="reg-password">密码</label>
                    <input type="password" id="reg-password" class="form-control" placeholder="请输入密码(至少8位)" required>
                </div>
                <div class="form-group">
                    <label for="reg-confirm-password">确认密码</label>
                    <input type="password" id="reg-confirm-password" class="form-control" placeholder="请再次输入密码" required>
                </div>
                <button type="submit" class="btn">注册</button>
                <div class="social-login">
                    <p>或使用以下方式注册</p>
                    <div class="social-icons">
                        <div class="social-icon">
                            <i class="fab fa-google"></i>
                        </div>
                        <div class="social-icon">
                            <i class="fab fa-facebook-f"></i>
                        </div>
                        <div class="social-icon">
                            <i class="fab fa-twitter"></i>
                        </div>
                        <div class="social-icon">
                            <i class="fab fa-github"></i>
                        </div>
                    </div>
                </div>
                <div class="switch-link">
                    已有账号? <button type="button" class="link-btn" id="login-btn">立即登录</button>
                </div>
            </form>
        </div>

        <!-- 忘记密码卡片 -->
        <div class="login-card forgot-password-card" id="forgot-password-card">
            <div class="card-title">
                <h1>找回密码</h1>
                <p>请输入您的邮箱以重置密码</p>
            </div>
            <form id="forgot-password-form">
                <div class="form-group">
                    <label for="reset-email">电子邮箱</label>
                    <input type="email" id="reset-email" class="form-control" placeholder="请输入您的注册邮箱" required>
                </div>
                <button type="submit" class="btn">发送重置链接</button>
                <div class="switch-link">
                    <button type="button" class="btn btn-secondary" id="back-to-login">返回登录</button>
                </div>
            </form>
        </div>
    </div>
    <div class="illustration-section">
        <div class="stars" id="stars-container"></div>
        <div class="planet"></div>
        <div class="astronaut">
            <div class="astronaut-part helmet"></div>
            <div class="astronaut-part visor"></div>
            <div class="astronaut-part suit"></div>
            <div class="astronaut-part arm-left"></div>
            <div class="astronaut-part arm-right"></div>
            <div class="astronaut-part leg-left"></div>
            <div class="astronaut-part leg-right"></div>
            <div class="astronaut-part backpack"></div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script>
    // 暗黑模式切换
    const themeToggle = document.getElementById('theme-toggle');
    const themeIcon = themeToggle.querySelector('i');

    themeToggle.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');

        if (document.body.classList.contains('dark-mode')) {
            themeIcon.classList.remove('fa-moon');
            themeIcon.classList.add('fa-sun');
        } else {
            themeIcon.classList.remove('fa-sun');
            themeIcon.classList.add('fa-moon');
        }
    });

    // 语言切换功能
    const languageDropdown = document.getElementById('language-dropdown');
    const languageToggle = document.getElementById('language-toggle');
    const dropdownContent = languageDropdown.querySelector('.dropdown-content');
    let currentLanguage = 'zh';

    // 设置激活语言
    function setActiveLanguage(lang) {
        currentLanguage = lang;

        // 更新所有语言选项状态
        dropdownContent.querySelectorAll('a').forEach(item => {
            if (item.getAttribute('data-lang') === lang) {
                item.classList.add('active');
                // 更新语言图标显示
                const flagIcon = item.querySelector('.flag-icon').src;
                languageToggle.innerHTML = `<img src="${flagIcon}" style="width:20px;height:15px;border-radius:2px;">`;
            } else {
                item.classList.remove('active');
            }
        });
    }

    // 初始化设置默认语言
    setActiveLanguage(currentLanguage);

    // 点击语言图标切换下拉菜单
    languageToggle.addEventListener('click', (e) => {
        e.stopPropagation();
        languageDropdown.classList.toggle('active');
    });

    // 点击语言选项
    dropdownContent.querySelectorAll('a').forEach(item => {
        item.addEventListener('click', (e) => {
            const lang = item.getAttribute('data-lang');
            if (lang === currentLanguage) {
                e.preventDefault();
                return;
            }

            // 更新当前语言
            setActiveLanguage(lang);
            console.log('切换语言:', lang);
            languageDropdown.classList.remove('active');
        });
    });

    // 点击页面其他位置关闭下拉菜单
    document.addEventListener('click', (e) => {
        if (!languageDropdown.contains(e.target)) {
            languageDropdown.classList.remove('active');
        }
    });

    // 页面切换功能
    const loginCard = document.getElementById('login-card');
    const registerCard = document.getElementById('register-card');
    const forgotPasswordCard = document.getElementById('forgot-password-card');
    const registerBtn = document.getElementById('register-btn');
    const loginBtn = document.getElementById('login-btn');
    const forgotPasswordBtn = document.getElementById('forgot-password-btn');
    const backToLoginBtn = document.getElementById('back-to-login');

    // 切换到注册页面
    registerBtn.addEventListener('click', () => {
        switchCard(loginCard, registerCard);
    });

    // 切换到登录页面
    loginBtn.addEventListener('click', () => {
        switchCard(registerCard, loginCard);
    });

    // 切换到忘记密码页面
    forgotPasswordBtn.addEventListener('click', () => {
        switchCard(loginCard, forgotPasswordCard);
    });

    // 返回登录页面
    backToLoginBtn.addEventListener('click', () => {
        switchCard(forgotPasswordCard, loginCard);
    });

    // 卡片切换动画
    function switchCard(fromCard, toCard) {
        gsap.to(fromCard, {
            duration: 0.3,
            opacity: 0,
            y: 20,
            ease: "power2.in",
            onComplete: () => {
                fromCard.style.display = 'none';
                toCard.style.display = 'block';
                gsap.fromTo(toCard,
                    { opacity: 0, y: -20 },
                    {
                        duration: 0.3,
                        opacity: 1,
                        y: 0,
                        ease: "power2.out"
                    }
                );
            }
        });
    }

    // 3D角色动画
    document.addEventListener('mousemove', (e) => {
        const x = e.clientX / window.innerWidth;
        const y = e.clientY / window.innerHeight;

        gsap.to('.helmet', {
            duration: 0.5,
            x: (x - 0.5) * 20,
            y: (y - 0.5) * 20,
            ease: 'power2.out'
        });

        gsap.to('.arm-left', {
            duration: 0.5,
            rotation: (x - 0.5) * 30,
            ease: 'power2.out'
        });

        gsap.to('.arm-right', {
            duration: 0.5,
            rotation: (x - 0.5) * -30,
            ease: 'power2.out'
        });

        gsap.to('.leg-left', {
            duration: 0.5,
            rotation: (x - 0.5) * 15,
            ease: 'power2.out'
        });

        gsap.to('.leg-right', {
            duration: 0.5,
            rotation: (x - 0.5) * -15,
            ease: 'power2.out'
        });

        gsap.to('.visor', {
            duration: 0.3,
            x: (x - 0.5) * 5,
            y: (y - 0.5) * 5,
            ease: 'power2.out'
        });
    });

    // 创建星星背景
    function createStars() {
        const starsContainer = document.getElementById('stars-container');

        for (let i = 0; i < 100; i++) {
            const star = document.createElement('div');
            star.classList.add('star');
            star.style.width = `${Math.random() * 3}px`;
            star.style.height = star.style.width;
            star.style.top = `${Math.random() * 100}%`;
            star.style.left = `${Math.random() * 100}%`;
            star.style.opacity = Math.random();
            star.style.animationDelay = `${Math.random() * 5}s`;
            star.style.animationDuration = `${5 + Math.random() * 10}s`;

            starsContainer.appendChild(star);
        }
    }

    // 表单提交处理
    document.getElementById('login-form').addEventListener('submit', (e) => {
        e.preventDefault();
        handleLogin();
    });

    document.getElementById('register-form').addEventListener('submit', (e) => {
        e.preventDefault();
        handleRegister();
    });

    document.getElementById('forgot-password-form').addEventListener('submit', (e) => {
        e.preventDefault();
        handleForgotPassword();
    });

    function handleLogin() {
        const email = document.getElementById('email').value;
        const password = document.getElementById('password').value;
        const remember = document.getElementById('remember').checked;

        console.log('登录信息:', { email, password, remember });

        // 模拟登录成功动画
        gsap.to('.login-card', {
            duration: 0.5,
            y: -20,
            boxShadow: '0 20px 50px rgba(70, 130, 180, 0.3)',
            ease: 'power2.out'
        });

        animateAstronautCelebration();
    }

    function handleRegister() {
        const name = document.getElementById('reg-name').value;
        const email = document.getElementById('reg-email').value;
        const password = document.getElementById('reg-password').value;
        const confirmPassword = document.getElementById('reg-confirm-password').value;

        console.log('注册信息:', { name, email, password, confirmPassword });

        // 模拟注册成功动画
        gsap.to('.register-card', {
            duration: 0.5,
            y: -20,
            boxShadow: '0 20px 50px rgba(70, 130, 180, 0.3)',
            ease: 'power2.out'
        });

        animateAstronautCelebration();
    }

    function handleForgotPassword() {
        const email = document.getElementById('reset-email').value;

        console.log('重置密码:', { email });

        // 模拟发送成功动画
        gsap.to('.forgot-password-card', {
            duration: 0.5,
            y: -20,
            boxShadow: '0 20px 50px rgba(70, 130, 180, 0.3)',
            ease: 'power2.out'
        });
    }

    // 宇航员庆祝动画
    function animateAstronautCelebration() {
        gsap.to('.astronaut', {
            duration: 0.8,
            scale: 1.1,
            y: -20,
            ease: 'elastic.out(1, 0.5)'
        });

        // 手臂挥动动画
        gsap.to('.arm-left', {
            duration: 0.3,
            rotation: -90,
            repeat: 1,
            yoyo: true,
            ease: 'power2.inOut'
        });

        gsap.to('.arm-right', {
            duration: 0.3,
            rotation: 90,
            repeat: 1,
            yoyo: true,
            ease: 'power2.inOut',
            delay: 0.3
        });

        // 头盔发光效果
        gsap.to('.helmet', {
            duration: 0.5,
            boxShadow: '0 0 20px rgba(109, 213, 237, 0.8)',
            repeat: 1,
            yoyo: true
        });
    }

    // 初始化
    document.addEventListener('DOMContentLoaded', () => {
        createStars();

        // 行星动画
        gsap.to('.planet', {
            duration: 30,
            rotation: 360,
            repeat: -1,
            ease: 'none'
        });

        // 初始宇航员动画
        gsap.from('.astronaut-part', {
            duration: 1,
            y: 100,
            opacity: 0,
            stagger: 0.1,
            ease: 'back.out(1.7)'
        });

        // 登录表单动画
        gsap.from('.login-card > *', {
            duration: 0.8,
            y: 30,
            opacity: 0,
            stagger: 0.1,
            ease: 'power2.out',
            delay: 0.5
        });
    });
</script>
</body>
</html>